<template>
  <div class="digital-container">
    <div
      v-for="(digit, index) in displayDigits"
      :key="`wheel-${index}-${digit}`"
      class="digit-wheel"
      :style="wheelStyle"
    >
      <div class="digit-scroller" :style="scrollerStyle(index)">
        <div
          v-if="digit === '.'"
          class="digit-cell digit-point"
          :style="digitStyle"
        >
          <span>.</span>
        </div>
        <div
          v-else
          v-for="num in 10"
          :key="num - 1"
          class="digit-cell"
          :style="digitStyle"
        >
          <span>{{ num - 1 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入封装方法
import encapsulation from "../../utils/aircimGird";

export default {
  //混入封装方法
  mixins: [encapsulation],
  props: {
    value: { type: [Number, String], default: 0 },
    duration: { type: Number, default: 800 },
    height: { type: Number, default: 43 },
    fillWidth: { type: Number, default: 2 },
    // 新增属性
    color: { type: String, default: "#fff" },
    fontSize: { type: Number, default: 29.4 },
    fontWeight: { type: Number, default: 700 },
    easing: { type: String, default: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
    prefix: { type: String, default: "" },
    suffix: { type: String, default: "" },
  },
  data() {
    return {
      displayValue: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.displayValue = this.value;
    });
  },
  watch: {
    value: {
      handler(newVal) {
        this.displayValue = newVal;
      },
      immediate: true,
    },
  },
  computed: {
    wheelStyle() {
      return {
        width: `${this.fillWidth > 0 ? 31 : 43}px`,
        height: `${this.height}px`,
      };
    },
    displayDigits() {
      const numStr = String(this.displayValue);
      return numStr.split("");
    },
    digitStyle() {
      return {
        color: this.color,
        fontSize: `${this.fontSize}px`,
        fontWeight: this.fontWeight,
      };
    },
  },
  methods: {
    scrollerStyle(index) {
      const digit = this.displayDigits[index];
      if (digit === ".") {
        return {}; // 小数点不需要滚动
      }
      return {
        transform: `translateY(${-digit * this.height}px)`,
        transition: `all ${this.duration}ms ${this.easing}`,
        transitionDelay: `${index * 150}ms`,
      };
    },
  },
};
</script>

<style scoped>
.digital-container {
  display: inline-flex;
  padding: 0;
  border-radius: 6px;
}

.digit-wheel {
  position: relative;
  overflow: hidden;
  margin: 0 3px;
  perspective: 430px;
}

.digit-scroller {
  position: absolute;
  width: 100%;
  transform: translateY(0);
  will-change: transform;
  transition: transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
  animation: identifier 1s ease-in-out;
}

.digit-cell {
  height: 43px;
  display: flex;
  line-height: 40px;
  justify-content: center;

  background: url(../../static/assets/HallSituation/number.png) no-repeat center;
  background-size: 100% 100%;
  &.digit-point {
    background: none;
  }
}

@keyframes identifier {
  0% {
    transform: translateY(0);
  }
}
</style>
